<template>
  <div class="code-layout" v-if="detailData">
    <div class="code-info">
      <h3 class="info-title">基本信息</h3>
      <ul class="info-item">
        <li>
          <span class="key">名称:</span>
          <span class="val">{{ detailData.model.name }}</span>
        </li>
        <li>
          <span class="key">创建人：</span>
          <span class="val">
            {{ detailData.create_user && (detailData.create_user &&
              detailData.create_user.nick_name ||
              detailData.create_user && detailData.create_user.username)
            }}
          </span>
        </li>
        <li>
          <span class="key">创建时间：</span>
          <span class="val">{{ detailData.create_time }}</span>
        </li>
      </ul>
      <h3 class="info-title">环境信息<i class="el-icon-edit-outline edit" @click="updateModelEva" /></h3>
      <ul class="info-item">
        <li>
          <span class="key">类型:</span>
          <span class="val">{{ detailData.type.name }}</span>
        </li>
        <li>
          <span class="key">资源组:</span>
          <span class="val">{{ detailData.node_group_list[0].product.name }}</span>
        </li>
        <li>
          <span class="key">镜像:</span>
          <span class="val">{{ detailData.node_group_list[0].image.name }}</span>
        </li>
        <li>
          <span class="key">启动命令行:</span>
          <span class="val">{{ detailData.node_group_list[0].command }}</span>
        </li>
      </ul>

      <div class="code-info-item">
        <h3 class="info-title">节点信息</h3>
        <dl class="code-dl" v-for="(tag, i) in detailData.tcp_port_list" :key="i">
          <ul class="info-item-tcp-port">
            <li>
              <span class="key">协议：{{ tag.proxyProtocol }}</span>
              <span class="key">容器端口：{{ tag.containerPort }}</span>
              <span class="key">映射端口：{{ tag.nodePort }}</span>
              <span class="key">映射地址：{{ tag.endpoint }}</span>
            </li>
          </ul>
        </dl>
      </div>

      <h3 class="info-title">节点容器信息</h3>
      <div class="info-item"><span>业务节点:</span></div>
      <dl class="code-dl" v-for="(tag, i) in detailData.node_group_list" :key="i">
        <ul class="info-item-tcp-port">
          <li>
            <p class="key">节点分组-{{ i }}</p>
            <div v-for="(pod, j) in tag.pod_list" :key="j">
              <p class="key">节点名称：{{ pod.name }}</p>
              <p class="val">节点id：{{ pod.uid }}</p>
              <p class="val">节点ip：{{ pod.pod_ip }}</p>
              <!-- <p class="val">进程数量：500</p> -->
              <br />
            </div>
          </li>
        </ul>
      </dl>

    </div>
    <el-dialog :visible.sync="showModelEvaDialog" title="模型测试" width="840px">
      <el-form class="form myself-form" ref="evaModelForm" :model="evaModelForm" :rules="modelEvaSubmitRules"
        label-width="120px">
        <el-form-item label="模型名称" prop="version">
          {{ detailData.model.name }}
        </el-form-item>
        <el-form-item label="模型版本" prop="version">
          {{ detailData.model_version.version }}
        </el-form-item>
        <el-form-item label="类型" prop="version">
          <el-select v-model="evaModelForm.type" value-key="id" @change="modelEvaTypeChange" style="width:100%;"
            :popper-append-to-body="false" popper-class="select-popper" placeholder="请选择">
            <el-option v-for="item in modelEvaTyleOptions" :key="item.id" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资源组">
          <el-select v-model="node_group_list.product_id" class="full-extent-select">
            <el-option v-for="item in productOptions" :value="item.id" :label="item.name" :key="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="启动命令行">
          <!-- <el-input type="input" v-model="evaModelForm.command" /> -->
          <el-input type="input" v-model="evaModelForm.node_group_list[0].command" />
          <!-- <el-input type="input" v-model="evaModelForm.type.eva_image.command" /> -->
        </el-form-item>
        <div v-if="showDiv">
          <el-form-item label="评估镜像">
            <el-select v-model="node_group_list.image_id" class="full-extent-select">
              <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启动命令行" prop="command">
            <el-input type="text" v-model="node_group_list.command" />
          </el-form-item>
        </div>
        <el-form-item label="">
          <el-button type="primary" @click="commitModelEva">确定</el-button>
          <el-button class="none-type" @click="cancelModelEva">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

// import plugState from '@/components/module/plug-state'
import { getAllImages, } from '@/api/image'
import { putModelTest, getModelTestDetail } from '@/api/modelTest'
import { getAllProducts } from '@/api/product'
import { getAllModelEvaluationTypes } from '@/api/modelEvaType'

export default {
  data() {
    return {
      modelId: this.$route.query.id,
      status: null,
      evaModelForm: null,
      showUpdateDockfileDialog: false,
      dockerFile: '',
      imageOptions: [],
      showModelEvaDialog: false,
      node_group_list: [],
      productOptions: [],
      modelEvaTyleOptions: [],
      showDiv: false,
      modelEvaSubmitRules: {},
    };
  },

  props: ['detailData'],
  watch: {
    detailData(val) {
      this.status = val.status;
      this.formData = val
    },
  },
  async created() {
    console.log("detailData", this.detailData)
    this.evaModelForm = JSON.parse(JSON.stringify(this.detailData))
    this.getImageList()
    this.getProductList()
    this.getAllModelEvaTypes()
  },
  components: {
    // plugState,
  },

  async mounted() {
    this.$nextTick(() => {
      this.status = this.detailData.status;
    })
  },
  destroyed() {

  },
  methods: {
    async getAllModelEvaTypes() {
      let res = await getAllModelEvaluationTypes()
      let data = res.data
      data.push({ "name": "自定义", "id": "1" })
      this.modelEvaTyleOptions = data
      console.log(" this.modelEvaTyleOptions", this.modelEvaTyleOptions)
    },
    async getProductList() {
      let res = await getAllProducts()
      this.productOptions = res.data
    },
    async getImageList() {
      let res2 = await getAllImages({ visibility: 2, type: 3 })
      this.imageOptions = res2.data
    },
    modelEvaTypeChange() {
      if (this.evaModelForm.type.id == '1') {
        this.showDiv = true
      } else {
        this.showDiv = false
      }
    },
    async updateModelEva() {
      this.showModelEvaDialog = true
      this.node_group_list = this.detailData.node_group_list[0]
    },
    commitModelEva() {
      console.log("commit")
      this.$refs.evaModelForm.validate(async (valid) => {
        if (valid) {
          console.log("")
          if (this.evaModelForm.type.id != "1") {
            this.evaModelForm.type_id = this.evaModelForm.type.id;
            this.evaModelForm.node_group_list = [{
              "image_id": this.evaModelForm.type.eva_image_id,
              // "command": this.evaModelForm.type.eva_image.command,
              "command": this.evaModelForm.node_group_list[0].command,
              "product_id": this.node_group_list.product_id,
              "type": 1,
              "pod_num": 1
            }]
          } else {
            this.evaModelForm.type_id = this.evaModelForm.type.id
            this.evaModelForm.node_group_list = [this.node_group_list]
          }
          await putModelTest(this.evaModelForm)
          this.showModelEvaDialog = false
          this.freshData()
        }
      })
    },
    async freshData() {
      let res = await getModelTestDetail({ id: this.detailData.id });
      if (res && res.data) {
        let data = res.data
        if (data.type_id == 1) {
          data.type = { "name": "自定义", "id": "1" }
        }
        this.$emit('update:detailData', res.data);
      }
    },
    cancelModelEva() {
      this.showModelEvaDialog = false
    },
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>
